<template>
  <a-card v-if="items.length" style="margin-bottom:12px" title="热门文章">
    <template #extra>
      <a-segmented v-model:value="sinceDays" :options="windowOptions" size="small" @change="load" />
    </template>
    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4 }" :data-source="items" :locale="{emptyText:'暂无数据'}">
      <template #renderItem="{ item }">
        <a-list-item>
          <ArticleCard :item="item" @click="goDetail" />
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { fetchHotArticles } from '@/api/public/articles'
import type { ArticleListItemVO } from '@/types/api'
import ArticleCard from '@/components/ArticleCard.vue'

const props = withDefaults(defineProps<{ categoryId?: number; tagId?: number; defaultSinceDays?: number }>(), { defaultSinceDays: 30 })
const router = useRouter()
const items = ref<ArticleListItemVO[]>([])
const sinceDays = ref<number>(props.defaultSinceDays)
const windowOptions = [ { label: '7天', value: 7 }, { label: '30天', value: 30 }, { label: '全部', value: 0 } ]

async function load() {
  const since = sinceDays.value && sinceDays.value > 0 ? sinceDays.value : undefined
  const { data } = await fetchHotArticles(8, props.categoryId, props.tagId, since)
  items.value = data || []
}

function goDetail(id: number) { 
  router.push({ name: 'ArticleDetail', params: { id } })
}

onMounted(load)
</script>

<style scoped>
</style>


